<!-- 
文件说明：该组件是“表格”公共组件；
参数：tableData >>> 数据数组
      columns >>> 表格列的配置描述
      pagination >>> 分页器,设为 false 时不展示和进行分页
      row-selection >>> 选中项
-->
<template>
  <div class="tablePaganations">
    <!-- 表格 -->
    <a-table
      :data-source="tableData"
      :pagination="false"
      :columns="columns"
      :row-selection="props.isSelect ? rowSelection1 : null"
    >
      <template #[item]="scope" v-for="item in renderArr">
        <slot :name="item" :scope="scope"></slot>
      </template>
    </a-table>
  </div>
  <!-- 分页器 -->
  <div class="paginationSetting">
    <div class="paginationSettingtext">
      <span> 共 {{ total }} 条记录 </span>
      <span style="margin-left: 20px">
        第 {{ pageCurrent }} /
        {{ total == 0 ? 1 : Math.ceil(total / pageSize) }} 页
      </span>
    </div>
    <div class="paginations">
      <a-pagination
        :current="pageCurrent"
        :page-size-options="['5', '10', '20', '30', '40']"
        :total="total"
        show-size-changer
        show-quick-jumper
        :page-size="pageSize"
        @change="pageChange"
      >
        <template #buildOptionText="props">
          <span>{{ props.value }}条/页</span>
        </template>
      </a-pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Ref, ref, useSlots } from "vue";
const props = defineProps({
  Table: { type: Object, required: true },
  column: { type: Array, required: true },
  isSelect: Boolean,
});
let tableData = ref<any>([]);
let total = ref<number>(0); //多少条数据
const columns: Ref<any[]> = ref([]);
let pageCurrent = ref<number>(1); //当前第几页
let pageSize = ref<number>(10); //每页多少行

if (props.Table) {
  //非空
  tableData.value = props.Table; //表单数据
}
if (props.Table.total) {
  //非空
  total.value = props.Table.total; //表单长度
}
if (props.column) {
  //非空
  //表单columns
  columns.value = props.column;
}
const slots = useSlots();

const renderArr = Object.keys(slots);
// console.log(renderArr);

const emit = defineEmits(["batch", "changePage"]); //子传父

const pageChange = (current: number, pagesize: number) => {
  //分页器改变事件
  // console.log("current", current, "pageSize", pagesize);
  pageCurrent.value = current;
  if (pageSize.value != pagesize) {
    //如果每页行数改变，页码改为1
    pageCurrent.value = 1;
  }
  pageSize.value = pagesize;
  emit("changePage", {
    pageCurrent: pageCurrent.value,
    pageSize: pageSize.value,
  });
};
// watch(()=>pageSize.value,(newValue,oldValue)=>{ //监听pageSize的数据改变页码
//   // console.log('当前值',pageSize.value);
//   // console.log('新值',newValue);
//   // console.log('旧值',oldValue);
//   if(pageSize.value==newValue){
//     pageCurrent.value = 1
//     emit('showSize',{pageCurrent:pageCurrent.value,pageSize:pageSize.value})
//   }
// })
// 是否多选
const rowSelection1 = {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  onChange: (selectedRowKeys: any) => {
    // console.log(selectedRowKeys, selectedRows);
    emit("batch", selectedRowKeys);
  },
  getCheckboxProps: (record: { name: string }) => ({
    disabled: record.name === "Disabled User", // Column configuration not to be checked
    name: record.name,
  }),
};
</script>

<style scoped lang="scss">
.tablePaganations {
  width: 100%;
  height: 100%;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: auto;
}
.paginationSetting {
  display: flex;
  justify-content: space-between;
  height: 35px;
  margin-top: 20px;
}
.paginationSettingtext {
  margin-left: 20px;
}
.paginationSettingtext span {
  color: gray;
  line-height: 35px;
}
.paginations {
  margin-right: 20px;
}
.ant-table-wrapper {
}
</style>
